<template>
  <!-- 生产计划详情 -->
  <a-modal :width="1200" title="生产计划详情" :footer="false" title-align="start" v-model:visible="showDetail" okText="保存" :mask-closable="false" @cancel="closedDialog">
    <div class="edit-product-plan-wrap">
      <div class="product-info-w">
        <div class="handle-w flex-c">
          <h2>生产计划</h2>
          <div class="flex-c-sb handle-con">
            <a-space :size="20">
              <span>材质：{{ getMaterial(currentData) }}</span>
              <span>类型：{{ productTypeMap[currentData.productType] || currentData.productType }}</span>
            </a-space>
            <a-space :size="10">
              <a-popconfirm v-if="currentData.status === 10 && $authPass('procurement.production.plan.cancel')" content="是否删除？" @ok="submitDelete()" type="warning">
                <a-button class="gray-outline">删除</a-button>
              </a-popconfirm>
              <a-button v-if="currentData.status === 10 && $authPass('procurement.production.plan.update')" type="primary" @click="openEdit('openEdit')">编辑</a-button>
              <a-popconfirm v-if="currentData.status === 10 && $authPass('procurement.production.plan.start')" content="是否开始生产？" @ok="startProduction()" type="warning">
                <a-button type="primary">提交生产</a-button>
              </a-popconfirm>
              <a-button v-if="currentData.status === 20 && $authPass('procurement.production.plan.inbound')" type="primary" @click="openEdit('openInStorage')">生产入库</a-button>
              <a-button v-if="currentData.status === 20 && $authPass('procurement.production.plan.close')" type="primary" @click="openEdit('openStop')">终止生产</a-button>
              <a-button v-if="$authPass('procurement.production.plan.print')" @click="toPrintPDF()" type="primary">打印</a-button>
            </a-space>
          </div>
        </div>
        <div class="flex-c-sb bill-info-w">
          <p class="highlight">{{ currentData.billNo }}</p>
          <p>计划创建时间：{{ $setTime(currentData.gmtCreate) }}</p>
          <p>接单日期：{{ $setTime(currentData.gmtAccept, 'YYYY-MM-DD') }}</p>
          <p>期望交货日期：{{ $setTime(currentData.gmtExpectDelivery, 'YYYY-MM-DD') }}</p>
          <a-tag checkable color="arcoblue" :default-checked="true">{{ statusMap[currentData.status] }}</a-tag>
        </div>
        <div class="flex">
          <div class="img-w">
            <a-image width="240" height="240" fit="contain" :src="currentData.productImg" />
            <div class="num-w flex-c">
              <p class="num">数量*{{ currentData.productionAmt }}</p>
              <p>{{ currentData.warehouseName }}</p>
            </div>
          </div>
          <div class="product-info-con">
            <div class="product-info">
              <p>SKU：{{ currentData.sku }}</p>
              <p>类目：{{ currentData.cateName }}</p>
              <p>规格：{{ getProductSpecs(currentData) }}</p>
              <p v-for="(prop, k) in currentData.purchaseSpecsArr" :key="k">
                <span>{{ prop.name }}：</span>
                <span>{{ getStrVal(prop.purchaseValue) }}</span>
              </p>
            </div>
            <div class="remark-w">
              <p>备注：{{ currentData.remark }}</p>
            </div>
          </div>
        </div>
      </div>
      <a-table class="table-singe-line show-border-table" :data="currentData.partsList" size="mini" :pagination="false">
        <template #columns>
          <a-table-column data-index="partsName" title="配件" />
          <a-table-column data-index="partsSpecs" title="规格&尺寸" />
          <a-table-column data-index="partsAmt" title="数量" />
          <a-table-column data-index="partsWeight" title="重量（g）" />
        </template>
      </a-table>
      <a-table style="margin-top: 5px" class="table-singe-line show-border-table" :data="currentData.procedureList" size="mini" :pagination="false">
        <template #columns>
          <a-table-column data-index="sort" title="序号" :width="45">
            <template #cell="{ rowIndex }">
              <p>{{ rowIndex + 1 }}</p>
            </template>
          </a-table-column>
          <a-table-column data-index="procedureName" title="工序" />
          <a-table-column data-index="issuedAmt" title="下发数量" />
          <a-table-column data-index="masterWorker" title="师傅" />
          <a-table-column data-index="gmtStart" title="开始时间" />
          <a-table-column data-index="gmtEnd" title="结束时间" />
          <a-table-column data-index="returnWeight" title="返回重量（g）" />
        </template>
      </a-table>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { cancelProductionPlan, startProductionPlan } from '@/api/purchaseApplication'
  import { parseJson, getStrVal } from '@/utils'
  import { useRouter } from 'vue-router'

  const emit = defineEmits(['closed', 'success', 'openEdit', 'openInStorage', 'openStop'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    currentData: {
      type: Object,
      default: () => {},
    },
  })
  const router = useRouter()
  const showDetail = ref(props.isShow)
  const statusMap = {
    0: '作废',
    10: '待生产',
    20: '生产中',
    30: '已完成',
  }
  const productTypeMap = {
    1: '普货',
    2: '打样',
    3: '定制',
  }
  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
  // 获取材质
  function getMaterial(row: any) {
    let propArr = row.purchaseSpecsArr || []
    return propArr.find((el: any) => el.name == '材质')?.purchaseValue
  }
  function openEdit(val: string) {
    emit(val)
    closedDialog()
  }

  // 删除计划
  async function submitDelete() {
    const res: any = await cancelProductionPlan({ ids: [props.currentData.id] })
    if (res) {
      Message.success('删除成功')
      emit('success')
      closedDialog()
    }
  }
  // 开始生产
  async function startProduction() {
    const res: any = await startProductionPlan({ ids: [props.currentData.id] })
    if (res) {
      Message.success('已提交生产')
      emit('success')
      closedDialog()
    }
  }
  // 去打印
  function toPrintPDF() {
    closedDialog()
    window.sessionStorage.setItem('productPlanId', props.currentData.id)
    router.push('/purchaseApplication/supplier/productPlanPrintPDF')
  }

  // 关闭
  function closedDialog() {
    showDetail.value = false
    emit('closed')
  }
</script>
<style lang="less"></style>
<style lang="less" scoped>
  .edit-product-plan-wrap {
    height: calc(84vh - 100px);
    overflow: auto;
    padding-bottom: 20px;
    .product-info-w {
      border: 1px solid #ddd;
      margin-bottom: 5px;
      .handle-w {
        h2 {
          width: 150px;
          font-size: 16px;
          font-weight: bold;
          padding: 10px;
          text-align: center;
          border-right: 1px solid #ddd;
        }
        .handle-con {
          padding: 0 10px 0 20px;
          flex: 1;
        }
      }
      .bill-info-w {
        padding: 10px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
      }
      .img-w {
        width: 260px;
        border-right: 1px solid #ddd;
        padding: 10px;
        .num-w {
          margin-top: 10px;
          .num {
            font-size: 16px;
            font-weight: bold;
            margin-right: 20px;
          }
        }
      }
      .product-info-con {
        flex: 1;
      }
      .product-info {
        border-bottom: 1px solid #ddd;
        padding: 10px;
      }
      .remark-w {
        padding: 10px;
      }
    }
  }
</style>
